<template>
    <div class="couner">
        <div class="title">
            <p class="">渠道来源</p>
            <img src="../../images/dataScreen-title.png" alt="">
        </div>
        <div class="echart" ref="echart">

        </div>
    </div>
</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue';
import *as echarts from 'echarts'
let echart=ref()
onMounted(()=>{
    let myEchart=echarts.init(echart.value)
    myEchart.setOption({

        
        tooltip: {
            trigger: 'item'
        },
        legend: {
            type: 'scroll',
            bottom: 10,
            data: (function () {
            var list = [];
            for (var i = 1; i <= 28; i++) {
                list.push(i + 2000 + '');
            }
            return list;
            })()
        },
        visualMap: {
            top: 'middle',
            right: 10,
            color: ['red', 'yellow'],
            calculable: true
        },
        radar: {
            indicator: [
            { text: 'IE8-', max: 400 },
            { text: 'IE9+', max: 400 },
            { text: 'Safari', max: 400 },
            { text: 'Firefox', max: 400 },
            { text: 'Chrome', max: 400 }
            ]
        },
        animationDuration: 2000 ,
        series: (function () {
            var series = [];
            for (var i = 1; i <= 28; i++) {
            series.push({
                type: 'radar',
                symbol: 'none',
                lineStyle: {
                width: 1
                },
                emphasis: {
                areaStyle: {
                    color: 'rgba(0,250,0,0.3)'
                }
                },
                data: [
                {
                    value: [
                    (40 - i) * 10,
                    (38 - i) * 4 + 60,
                    i * 5 + 10,
                    i * 9,
                    (i * i) / 2
                    ],
                    name: i + 2000 + ''
                }
                ]
            });
            }
            return series;
        })()
    })
})

</script>

<style scoped lang='scss'>
.couner{
    width: 100%;
    flex: 1;
    background: url('../../images/dataScreen-main-cb.png') no-repeat;
    background-size: 100% 100%;
    .title{
        margin-left: 10px;
        p{
            color: white;
            font-size: 20px;
        }
        
    }
    .echart{
        width: 100%;
        height: 90%;
    }
}
</style>